@charset "UTF-8";

@import "./components/swiper/swiper.min";
@import "./components/swiper/animate.min";

@import "./iconfont";
@import "./swiper";
@import "./iscroll";
*{
    margin: 0px;
    padding: 0px;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
#header{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color:#444; 
}
#header div{
    flex: 1;
}
#header div:nth-child(3){
    display: flex;
    justify-content: flex-end;
    margin-right: 10px;
}
#header div:nth-child(3) a{
    color: white;
    font-size: 12px;
}
#footer{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
#footer div{
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}
#footer a{
    color: white;
    font-size: 12px;
}
#footer .iconfont{
    color: white;
}
.mainContainer{
    display:none;
}
.bigbox{
    width:100%;
    height:100%;
    background: url('../images/bigbg.jpg') no-repeat center center;
    position: relative;
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.kuang{
   width: 100%;
   height: 90%;
}
.kuang img{
    width:100%;
    height:100%;
}
.title{
    position: absolute;
    left: 0px;
    top: 20%;
}
.title img{
    width:60%;
    height:100%;
}
.person{
    position: absolute;
    left:0%;
    top:42%;
}
.person img{
    width:72%;
    height:100%;
}
.pic{
    position: absolute;
    left:11%;
    top:48%;
}
.pic img{
    width:57%;
    height:100%;
    border-radius:50%; 
    border: 4px solid white;
}
.wordstitle{
    position: absolute;
    left:0;
    top:22%;
    width: 100%;
}
.wordstitle span:first-child{
    font-size: 20px;
}
.wordstitle span{
    display: block;
    text-align: center;
    color: white;
    font-size: 12px;
}
.infos{
    position: absolute;
    left:24%;
    top:32%;
}
.infos li{
    font-size: 16px;
    text-align:left;
    color: white;
    padding: 10px 0;
}
.meinfo{
    position: absolute;
    width:62%;
    left:20%;
    top:30%;
    font-size: 12px;
    color: white;
    text-align: left;
}
.meinfo p{
    text-indent: 2em;
    line-height: 25px;
}
.close{
    position: absolute;
    left: 0px;
    top: 0px;
}
.close{
    position: absolute;
    left:45%;
    top:93%;
}
.swiper-slide .iconfont{
    font-size: 32px;
    color: #444;
}
#scroller li{
    height: auto;
    line-height: normal;
}
#scroller li div{
    padding: 10px 0;
}
.type{
    font-size: 20px;
    font-weight: bold;
    color: rgb(5, 122, 2);
}
.companyname{
    font-size: 18px;
}
.showpic img{
    width:100%;
    height:100%;
}
.iconfont.active{
    color: lawngreen !important;
}
.iconfont.active a{
    color: lawngreen !important;
}
#scroller li.on{
    display: flex;
    flex-direction: row;
    height: 75px;
}
#scroller li.on div{
   padding: 0px;
}
#scroller li.on .skill-title{
    flex: 2;
    padding: 10px;
    font-weight: bolder;
    display: flex;
    justify-content: center;
    align-items: center;
}
#scroller li.on .skill-name{
    flex:8;
    padding: 5px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#scroller li.on .skill-all{
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}
.work-pic img{
    width:100%;
    height:100%;
}
#scroller li.meli{
    margin:10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.7);
}
#scroller{
    background: white;
}
#scroller li.meli img{
    padding:10px 0; 
    width:100%;
}
#scroller li.meli .me-name span{
    font-size: 18px;
    line-height: 1.2;
    color: #222;
    margin: 2px 0;
    padding: 8px 0;
    display: block;
}
#scroller li.meli .me-name p{
    text-indent: 2em;
}